<div class="wmm-module">
    <div class="layui-form-item">
        <form id="search-form" class="layui-form" action="javascript:;">
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="create()"><i class="layui-icon layui-icon-add-circle "></i>
                    添加用户</button>
            </div>
            <div class="layui-inline" wmm-fb-auth="DEVELOPER">
                <div class="layui-input-inline">
                    <select name="appId" lay-verify="required">
                        <option value="">选择平台搜索</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <input type="text" name="username" autocomplete="off" placeholder="请输入用户名/昵称" class="layui-input">
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm datatable-search"><i class="layui-icon layui-icon-search search-icon"></i> 查询</button>
            </div>
        </form>
    </div>

    <div class="layui-form-item" id="tb-sys-users" lay-filter="tb-sys-users">
    </div>
</div>

<template id="tmp-create-form">
    <div style="padding:20px">
        <form class="layui-form" lay-filter="user-form" action="javascript:;">
            <div class="layui-form-item" wmm-fb-auth="DEVELOPER">
                <label class="layui-form-label">所属平台<span class="required-star">*</span></label>
                <div class="layui-input-inline" style="width:200px">
                    <select name="appId" lay-filter="appId">
                        <option value="">选择平台</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:200px">
                    <select name="instanceId">
                        <option value="">选择实例</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="username" autocomplete="off" lay-verify="required|username" placeholder="请输入用户名"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="text" name="nickname" autocomplete="off" lay-verify="required|nickname" placeholder="请输入昵称"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="password" name="password" autocomplete="off" lay-verify="required|password"
                        placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="password" name="rePassword" autocomplete="off" lay-verify="required|password"
                        placeholder="请再次输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" autocomplete="off" placeholder="联系电话" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item fb-layer-btn">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="user">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>


<template id="tmp-modify-form">
    <div style="padding:20px">
        <form class="layui-form" lay-filter="user-modify-form" action="javascript:;">
            <input type="hidden" value="" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <span class="form-span">{{username}}</span>
                </div>
            </div>
            <div class="layui-form-item" wmm-fb-auth="DEVELOPER">
                <label class="layui-form-label">所属平台<span class="required-star">*</span></label>
                <div class="layui-input-inline" style="width:200px">
                    <select name="appId" lay-filter="appId">
                        <option value="">选择平台</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:200px">
                    <select name="instanceId">
                        <option value="">选择实例</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">昵称<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="text" name="nickname" autocomplete="off" lay-verify="required|nickname" placeholder="请输入昵称"
                        class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" autocomplete="off" placeholder="联系电话" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item fb-layer-btn">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="user-modify">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>

<template id="tmp-passowrd">
    <div class="template-content">
        <form class="layui-form" lay-filter="user-pwd-form" action="javascript:;">
            <input type="hidden" value="{{id}}" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <span class="form-span">{{username}}</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="password" name="password" autocomplete="off" lay-verify="required|password"
                        placeholder="请输入密码" class="layui-input input-medium">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码<span class="required-star">*</span></label>

                <div class="layui-input-block">
                    <input type="password" name="rePassword" autocomplete="off" lay-verify="required|password"
                        placeholder="请再次输入密码" class="layui-input input-medium">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="user-modify">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>
<template id="tmp-auth">
    <div class="template-content">
        <form class="layui-form" lay-filter="user-auth-form" action="javascript:;">
            <input type="hidden" value="{{id}}" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <span class="form-span">{{username}}</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block" style="width:360px">
                    <select name="rolesId" xm-select="rolesId" xm-content-height="180px" xm-select-show-count="3"
                        xm-select-skin="normal">
                        <option value="">选择角色</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item fb-layer-btn">
                <button type="button" class="layui-btn layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="user-modify">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</template>
<script>
    new Wmm({

        imports: ["form", "api", "datatable", "sysTools", "utils","formSelects"],

        data:{
            user:{
                name:function(o) {
                    return sysTools.getUserInfo();
                }
            }
        },

        vars: {
            table: {}
        },
        init: function () {
            sysTools.filterWmmFbAuth("DEVELOPER");
        },
        listener: function () {
            fb.form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                    if (!/^.{3,16}$/.test(value)) {
                        return '用户名长度在3~16位';
                    }
                },
                password: [/^.{4,16}$/, '密码长度在4到16位'],

                nickname: [/^.{0,8}$/, '昵称长度不能超过8位字符'],
            });


            fb.form.on("submit(user)", function (data) {
                var obj = data.field;
                if (obj.password !== obj.rePassword) {
                    fb.utils.msg.error("两次密码输入不一致", 1000);
                    return;
                }
                fb.api.sysUser.add(obj, function (ret) {
                    if (!ret.code) {
                        layer.closeAll();
                        fb.utils.msg.success("添加成功");
                        vars.table.flush();
                        return;
                    }
                });
            });

            fb.form.on("submit(user-modify)", function (data) {
                var obj = data.field;
                if (obj.password !== obj.rePassword) {
                    fb.utils.msg.error("两次密码输入不一致", 1000);
                    return;
                }
                obj.rolesId = obj.rolesId ? obj.rolesId.split(",") : null
                fb.api.sysUser.update(obj, function (ret) {
                    if (!ret.code) {
                        layer.closeAll();
                        fb.utils.msg.success("修改成功");
                        vars.table.flush();
                        return;
                    }
                });
            });


            //监听平台选择

            fb.form.on('select(appId)', function (data) {
                fb.api.appInstance.get("noPage=true&appId=" + data.value, function (ret) {
                    var list = ret.list;
                    fb.utils.render.select("[name=instanceId]", list, "instanceName");
                })
            });



        },
        renders: {
            create: function () {
                layer.open({
                    type: 1,
                    title: "添加用户",
                    content: document.querySelector("#tmp-create-form").innerHTML,
                    area: ['580px', '460px'],
                    success: function () {
                        sysTools.filterWmmFbAuth("DEVELOPER");
                        if (sysTools.isDeveloper()) {
                            sysTools.getAppList(function (ret) {
                                fb.utils.render.select("[lay-filter=user-form] [name=appId]", ret, "appName");
                                fb.form.render("select");
                            });
                        }
                    }
                });
            },
            toAuthChoose: function (data) {
                layer.open({
                    type: 1,
                    title: "分配角色",
                    content: document.querySelector("#tmp-auth").innerHTML.render(data),
                    area: ['530px', '350px'],
                    success: function () {
                        fb.api.role.get("noPage=true&appsId=" + data.appId, function (page) {
                            if (page.code) {
                                fb.utils.msg.error(page.msg);
                                return;
                            }

                            var arr = [];
                            page.list.forEach(function (elem) {
                                arr.push({
                                    name: elem.roleName,
                                    value: elem.id
                                });
                            });

                            fb.formSelects.data('rolesId', 'local', {
                                arr: arr,
                            });

                            fb.formSelects.value("rolesId", data.rolesId);

                        });
                    }
                });
            },
            resetPassword: function (data) {
                layer.open({
                    type: 1,
                    title: "重置密码",
                    content: document.querySelector("#tmp-passowrd").innerHTML.render(data),
                    area: ['390px', '280px'],
                });
            },
            modify: function (data) {
                layer.open({
                    type: 1,
                    title: "修改用户资料",
                    content: document.querySelector("#tmp-modify-form").innerHTML.render(data),
                    area: ['580px', '350px'],
                    success: function () {
                        sysTools.filterWmmFbAuth("DEVELOPER");
                        if (sysTools.isDeveloper()) {
                            sysTools.getAppList(function (ret) {
                                fb.utils.render.select("[lay-filter=user-modify-form] [name=appId]", ret, "appName");
                                var appid = data.appId;
                                fb.api.appInstance.get("noPage=true&appId=" + appid, function (ret) {
                                    var list = ret.list;
                                    fb.utils.render.select("[lay-filter=user-modify-form] [name=instanceId]", list, "instanceName");
                                    fb.form.val("user-modify-form", data);
                                    fb.form.render("select");
                                })
                            });
                        } else {
                            fb.form.val("user-modify-form", data);
                        }

                    }
                });
            },

            render: function () {
                if (sysTools.isDeveloper()) {
                    sysTools.getAppList(function (ret) {
                        fb.utils.render.select("[name=appId]", ret, "appName");
                    });
                }

                vars.table = new DataTable({
                    el: "tb-sys-users",
                    formEl: "search-form",
                    url: fb.api.sysUser.url,
                    multiple: false,
                    defines: [
                        {
                            head: "用户名",
                            prop: "username",
                            width: 200,
                            visible:function(){
                                return true;
                            },
                            fixed:"left"
                        }, {
                            head: "昵称",
                            prop: "nickname",
                        }, {
                            head: "联系电话",
                            prop: "mobile",
                        }, {
                            head: "启用状态",
                            prop: "is_enabled",
                            type: "checkbox",
                            change: function (filterData, data) {
                                var dom = filterData.elem;
                                var dataObj = {}
                                dataObj.id = data.id;
                                dataObj.isEnabled = dom.checked;
                                fb.api.sysUser.update(dataObj, function (ret) {
                                    if (!ret.code) {
                                        layer.msg("成功");
                                    }
                                });
                            }
                        }, {
                            head: "创建用户",
                            prop: "created_username",
                        }, {
                            head: "创建时间",
                            prop: "gmt_create",
                            type: "datetime",
                            width: 200
                        }, {
                            head: "修改时间",
                            prop: "gmt_modified",
                            type: "datetime",
                            width: 200
                        }, {
                            head: "最后登录IP",
                            prop: "last_login_ip",
                        }, {
                            head: "最后登录时间",
                            prop: "last_login_date",
                            type: "datetime",
                              width: 200
                        }
                    ],
                    handles: [
                        {
                            name: "修改",
                            edit: function (data) {
                                return renders.modify(data);
                            }
                        }, {
                            color: "green",
                            name: "密码重置",
                            edit: function (data) {
                                return renders.resetPassword(data);
                            }
                        }, {
                            color: "purple",
                            name: "授权",
                            edit: function (data) {
                                return renders.toAuthChoose(data);
                            }
                        }, {
                            del: {
                                tip: "确定要删除吗？",
                                do: function (data) {
                                    fb.api.sysUser.delete(data.id, function () {
                                        layer.closeAll();
                                        layer.msg("删除成功");
                                        vars.table.flush(true);
                                    })
                                }
                            }
                        },

                    ],
                });
            }
        }
    });
</script>